<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="">
          <GradeSelect v-model="searchForm.grade" />
        </el-form-item>
        <el-form-item>
          <ClassSelect v-model="searchForm.class" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.subject" clearable filterable placeholder="请选择科目">
            <el-option value="物理" label="物理" />
            <el-option value="技术" label="技术" />
            <el-option value="化学" label="化学" />
            <el-option value="生物" label="生物" />
            <el-option value="政治" label="政治" />
            <el-option value="历史" label="历史" />
            <el-option value="地理" label="地理" />
          </el-select>
        </el-form-item>
        <el-form-item prop="" label="">
          <el-input v-model="searchForm.search" placeholder="按学生姓名搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="user_info.user_id" label="学生ID" />
        <el-table-column prop="user_info.name" label="姓名/昵称" />
        <el-table-column prop="user_info.grade.grade_name" label="年级" />
        <el-table-column prop="user_info.class_name" label="班级" />
        <el-table-column prop="majoring" label="第一位优势科目" align="center">
          <template slot-scope="t">
            {{ getRankingAttr(t.row,1) }}
          </template>
        </el-table-column>
        <el-table-column prop="ranking" label="第二位优势科目" align="center">
          <template slot-scope="t">
            {{ getRankingAttr(t.row,2) }}
          </template>
        </el-table-column>
        <el-table-column prop="scheme" label="第三位优势科目" align="center">
          <template slot-scope="t">
            {{ getRankingAttr(t.row,3) }}
          </template>
        </el-table-column>
        <el-table-column prop="scheme" label="第四位优势科目" align="center">
          <template slot-scope="t">
            {{ getRankingAttr(t.row,4) }}
          </template>
        </el-table-column>
        <el-table-column prop="scheme" label="第五位优势科目" align="center">
          <template slot-scope="t">
            {{ getRankingAttr(t.row,5) }}
          </template>
        </el-table-column>
        <el-table-column prop="scheme" label="第六位优势科目" align="center">
          <template slot-scope="t">
            {{ getRankingAttr(t.row,6) }}
          </template>
        </el-table-column>
        <el-table-column prop="scheme" label="第七位优势科目" align="center">
          <template slot-scope="t">
            {{ getRankingAttr(t.row,7) }}
          </template>
        </el-table-column>
        <el-table-column label="最近选择时间" align="center">
          <template slot-scope="s">
            <span>{{ s.row.create_time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <div>
        <el-pagination
          class="pagination"
          :current-page="table.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </WrapPagination>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import GradeSelect from './components/grade-select'
import ClassSelect from './components/class-select'
import { getXkSubjects } from '../../api/statistics'
export default {
  name: 'CareerComplex',
  components: {
    GradeSelect: GradeSelect,
    ClassSelect: ClassSelect
  },
  mixins: [TableMixin],
  data() {
    return {
      searchForm: {
        grade: '',
        search: '',
        subject: '',
        class: ''
      },
      majors: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getRankingAttr(row, index) {
      // let maxList = []
      let maxNumList = []
      console.log(row.ranking)
      const ranking = JSON.parse(row.ranking)
      for (const x in ranking) {
        const newSubject = ranking[x]
        newSubject['subject'] = x
        maxNumList.push(newSubject)
      }
      maxNumList = maxNumList.sort((a, b) => {
        if (a.num < b.num) {
          return 1
        }
        if (a.num === b.num) {
          return 0
        }
        if (a.num > b.num) {
          return -1
        }
      })
      return maxNumList[index - 1] ? maxNumList[index - 1]['subject'] : ''
    },
    getList() {
      return this.wrapList(getXkSubjects, {
        subject: this.searchForm.subject,
        search: this.searchForm.search,
        grade_id: this.searchForm.grade,
        class_name: this.searchForm.class
      })
    }
  }
}
</script>

<style scoped>

</style>
